<template>
  <div class="panel-wrap">
    <a-form-model :model="model" :label-col="labelCol" :wrapper-col="wrapperCol">
      <template v-if="nodeOptions.length > 0">
        <div class="panel-title">节点</div>
        <a-form-model-item v-for="option in nodeOptions" :key="option.name" :prop="option.name" :label="option.label">
          <component
            :is="option.tagName"
            v-model="model[option.name]"
            v-bind="option.props"
            @change="(val) => handleChange(option.changeMethod, val)"
          />
        </a-form-model-item>
      </template>

      <template v-if="borderOptions.length > 0">
        <div class="panel-title">边框</div>
        <a-form-model-item v-for="option in borderOptions" :key="option.name" :prop="option.name" :label="option.label">
          <component
            :is="option.tagName"
            v-model="model[option.name]"
            v-bind="option.props"
            @change="(val) => handleChange(option.changeMethod, val)"
          />
        </a-form-model-item>
      </template>
      <template v-if="textOptions.length > 0">
        <div class="panel-title">文本</div>
        <a-form-model-item v-for="option in textOptions" :key="option.name" :prop="option.name" :label="option.label">
          <component
            :is="option.tagName"
            v-model="model[option.name]"
            v-bind="option.props"
            @change="(val) => handleChange(option.changeMethod, val)"
          />
        </a-form-model-item>
      </template>
    </a-form-model>
    <a-button type="danger" block icon="delete" @click="handleRemove">删除</a-button>
  </div>
</template>

<script>
import { generateOptions } from './method'

export default {
  name: 'ConfigNode',
  components: {
    Slider: () => import('../../Slider'),
    TextAlign: () => import('./TextAlign.vue'),
    LineType: () => import('./LineType.vue')
  },
  props: {
    globalGridAttr: {
      type: Object,
      default: null,
      require: true
    },
    cell: null
  },
  data() {
    return {
      curCel: '',
      timer: 0,
      marks: { 0: 0, 45: '', 90: 90, 135: '', 180: 180, 225: '', 270: 270, 315: '', 360: 360 },
      model: {
        nodeStroke: undefined,
        nodeStrokeWidth: undefined,
        nodeFill: undefined,
        nodeFontSize: undefined,
        nodeFontColor: undefined,
        nodeWidth: undefined,
        nodeHeight: undefined,
        nodeAngle: undefined,
        label: '',
        textWrap: '',
        textAnchor: '',
        strokeDasharray: 0
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 }
    }
  },
  watch: {
    cell: {
      handler(cell) {
        if (cell && cell.isNode()) {
          console.log(cell)
          this.model.nodeStroke = cell.attr('body/stroke')
          this.model.nodeStrokeWidth = cell.attr('body/strokeWidth')
          this.model.nodeFill = cell.attr('body/fill') || 'none'
          this.model.nodeFontSize = cell.attr('text/fontSize')
          this.model.nodeFontColor = cell.attr('text/fill')
          this.model.textAnchor = cell.attr('text/textAnchor')
          this.model.nodeWidth = cell.attr('data/width')
          this.model.nodeHeight = cell.attr('data/height')
          this.model.nodeAngle = cell.getAngle()
          this.model.label = cell.getLabel() || ''
          this.model.textWrap = cell.attr('text/textWrap/text') || ''
          this.model.strokeDasharray = cell.attr('body/strokeDasharray') || 0
        }
      },
      immediate: true
    },
    'model.label': 'onLabelChange',
    'model.textWrap': 'onTextChange'
  },
  computed: {
    formOptions() {
      return generateOptions(this.cell) || {}
    },
    nodeOptions() {
      return this.formOptions.nodeOptions || []
    },
    borderOptions() {
      return this.formOptions.borderOptions || []
    },
    textOptions() {
      return this.formOptions.textOptions || []
    }
  },
  methods: {
    handleChange(methodName, val) {
      if (this[methodName]) {
        this[methodName](val)
      } else {
        // console.warn(`Function ${methodName} is no defined`)
      }
    },
    debounce(callback, timeout = 300) {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(callback, timeout)
    },
    onStrokeChange(val) {
      this.cell.attr('body/stroke', val)
    },
    onStrokeWidthChange(val) {
      this.cell.attr('body/strokeWidth', val)
    },
    onFillChange(val) {
      this.cell.attr('body/fill', val)
    },
    onFontSizeChange(val) {
      this.cell.attr('text/fontSize', val)
    },
    onColorChange(val) {
      this.cell.attr('text/fill', val)
    },
    onWidthChange(val) {
      if (!val && val !== 0) {
        return
      }
      this.cell.resize(val, this.model.nodeHeight)
      this.cell.attr('data/width', val)
    },
    onHeightChange(val) {
      if (!val && val !== 0) {
        return
      }
      this.cell.resize(this.model.nodeWidth, val)
      this.cell.attr('data/height', val)
    },
    onRadiusChange(val) {
      console.log(val)
    },
    onAngleChange(val) {
      const cell = this.cell
      const preAngle = cell.getAngle()
      const diffAngle = val - preAngle
      cell.rotate(diffAngle)
    },
    onLabelChange(val) {
      // const val = e.target.value
      this.cell.setLabel(val)
    },
    onTextChange(val) {
      // const val = e.target.value
      this.cell.attr('text/textWrap/text', val)
    },
    onTextAnchorChange(e) {
      const val = e.target.value
      this.cell.attr('text/textAnchor', val)
    },
    setStrokeDasharray(val) {
      console.log(val)
      // if (shape === 'edge') {
      //   currentEdge.attr('line/strokeDasharray', strokeDasharrayNum)
      // } else {
      //   currentEdge.attr('outline/strokeDasharray', strokeDasharrayNum)
      // }
      this.cell.attr('body/strokeDasharray', val)
    },
    handleRemove() {
      this.cell.remove()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../style.less';
</style>
